<template>
  <div>
    <div class="title">周末去哪</div>
    <ul>
        <li class="item" v-for="item of weekendList" :key="item.id">
            <div class="item-img-wapper">
                <img class="item-img" :src="item.imgUrl">
            </div>
            <div class="item-info">
                <p class="item-title">{{item.imgTitle}}</p>
                <p class="item-desc">{{item.imgDesc}}</p>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    weekendList: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/styles/mixins.styl'
  .title
   line-height: .8rem
   background: #eee
   text-indent:.2rem
  .item-img-wapper
   overflow:hidden
   height:0
   padding-bottom: 33.9%
   margin-top:.2rem
   .item-img
    width:100%
  .item-info
    flex: 1
    padding: .1rem
    min-width: 0
    .item-title
     line-height: .54rem
     font-size: .28rem
     color:#212121
     ellipsis()
    .item-desc
     line-height: .4rem
     color: #616161
     ellipsis()
</style>
